<template>
    <div>
        <el-container class="home-container">
          <el-header class="header" style="height: 180px;">
          <div class="top-section">
            <div class="welcome-text">宠物之家欢迎你</div>
            <div class="navigation">
              <el-menu
              router
              :default-active="activeIndex"
              background-color="#FBE2BA"
              text-color="#000"
              active-text-color="#fff"
              class="menu" mode="horizontal">
                <el-menu-item index="/home">首页</el-menu-item>
                <el-menu-item index="/slider/0">我的订单</el-menu-item>
                <el-menu-item index="/cart">我的购物车</el-menu-item>
                <el-menu-item index="/suggestion">意见/建议</el-menu-item>
                <el-menu-item index="/personal-center">个人中心</el-menu-item>
                <el-menu-item index="/merchant-home">商家后台</el-menu-item>
              </el-menu>
              <div class="user-options">
                <div v-if="isLoggedIn">
                  <el-avatar :size="size" :src="circleUrl"></el-avatar>
                  <el-button type="text" @click="logout">退出登录</el-button>
                </div>
                <el-button v-else type="text" @click="login">请登录</el-button>
              </div>
            </div>
          </div>
          <div class="bottom-section">
            <div class="logo">
              <img src="../../assets/pet_home.jpg" alt="宠物之家" />
            </div>
            <div class="search-box">
              <el-input placeholder="请输入内容" v-model="searchName">
                <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
              </el-input>
            </div>
          </div>
        </el-header>
        <el-main>
            <router-view></router-view>
        </el-main>
        <el-footer style="height: auto;">
                <div class="footer-container">
                <div class="footerList">
                    <div class="footerItem">
                    <h4>购物指南</h4>
                    <ul class="footerItemCon">
                        <li>购物流程</li>
                        <li>会员介绍</li>
                        <li>生活旅行/团购</li>
                        <li>常见问题</li>
                        <li>购物指南</li>
                    </ul>
                    </div>
                    <div class="footerItem">
                    <h4>配送方式</h4>
                    <ul class="footerItemCon">
                        <li>上门自提</li>
                        <li>211限时达</li>
                        <li>配送服务查询</li>
                        <li>配送费收取标准</li>
                        <li>海外配送</li>
                    </ul>
                    </div>
                    <div class="footerItem">
                    <h4>支付方式</h4>
                    <ul class="footerItemCon">
                        <li>货到付款</li>
                        <li>在线支付</li>
                        <li>分期付款</li>
                        <li>邮局汇款</li>
                        <li>公司转账</li>
                    </ul>
                    </div>
                    <div class="footerItem">
                    <h4>售后服务</h4>
                    <ul class="footerItemCon">
                        <li>售后政策</li>
                        <li>价格保护</li>
                        <li>退款说明</li>
                        <li>返修/退换货</li>
                        <li>取消订单</li>
                    </ul>
                    </div>
                    <div class="footerItem">
                    <h4>特色服务</h4>
                    <ul class="footerItemCon">
                        <li>夺宝岛</li>
                        <li>DIY装机</li>
                        <li>延保服务</li>
                        <li>尚品汇E卡</li>
                        <li>尚品汇通信</li>
                    </ul>
                    </div>
                    <div class="footerItem">
                    <h4>帮助中心</h4>
                    <img src="../../assets/QQ.jpg" style="width: 163px; height: 126px;"/>
                    </div>
                </div>
                <div class="copyright">
                    <ul class="helpLink">
                    <li>
                        关于我们
                    </li>
                    <li>
                        联系我们
                    </li>
                    <li>
                        关于我们
                    </li>
                    <li>
                        商家入驻
                    </li>
                    <li>
                        营销中心
                    </li>
                    <li>
                        友情链接
                    </li>
                    <li>
                        关于我们
                    </li>
                    <li>
                        营销中心
                    </li>
                    <li>
                        友情链接
                    </li>
                    <li>关于我们</li>
                    </ul>
                    <p>地址：北京市昌平区宏福科技园综合楼6层</p>
                    <p>京ICP备19006430号</p>
                </div>
                </div>
        </el-footer>
        </el-container>
    </div>
</template>

<script>
export default {
  data() {
    return {
      isLoggedIn: false,
      activeIndex: '0',
      size: 50,
      circleUrl: '',
      // 搜索内容
      searchName: ''
    }
  },
  created() {
    // 尝试从存储中获取令牌
    this.init()
  },
  beforeUpdate() {
    this.init()
  },
  methods: {
    // 网页搜索功能
    search() {
      this.$router.push({ path: '/search', query: { searchName: this.searchName } })
    },
    // 页面初始化
    init() {
      const token = window.localStorage.getItem('userToken')
      const member = window.localStorage.getItem('membertouxiang')
      this.circleUrl = member
      // 如果存在令牌，用户已经登录
      this.isLoggedIn = !!token
    },
    handleClose() {},
    login() {
      this.$router.push('/login')
    },
    logout() {
      window.localStorage.removeItem('userToken')
      window.localStorage.removeItem('userID')
      // 重新加载页面,更新用户状态
      window.location.reload()
      this.$router.push('/login')
    }
  }
}
</script>

<style lang="less" scoped>
.el-avatar {
  margin-top: 5px;
}
.el-main {
  padding: 0px;
}
/* 头部样式 */
.header {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 0px 10px 10px 10px;
  background-color: #FBE2BA;
}

.top-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.bottom-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.welcome-text {
  font-size: 18px;
  font-weight: bold;
}

.navigation {
  display: flex;
  align-items: center;
}

.menu {
  margin-left: auto;
}

.user-options .el-button {
  margin-left: 10px;
  margin-right: 10px;
}

.logo img {
  width: 100px;
  height: 100px;
}

.search-box {
  display: flex;
  align-items: center;
}

.el-input {
  width: 300px;
  padding-right: 10px;
}

/* 底部的样式 */
.el-footer {
  display: inline-block;
  width: 100%;
  background-color: #333;
  color: #fff;
}
.footer p {
  margin: 0;
}
.footer-container {
  margin: 0;
}
.footerList {
  display: flex;
  text-align: center;
  // justify-content: space-between;
}

.footerItem {
  flex: 1;
}

.footerItem h4 {
  font-size: 18px;
  margin-bottom: 10px;
}

.footerItemCon {
  list-style: none;
  padding: 0;
}

.footerItemCon li {
  margin-bottom: 5px;
}

.helpLink {
  list-style: none;
  display: flex;
  justify-content: center;
}

.helpLink li {
  margin-right: 10px;
}

.space {
  margin-right: 5px;
}

.copyright {
  margin-top: 20px;
  text-align: center;
}

.el-input {
  width: 450px;
}
.el-header {
  margin-bottom: 10px;
}
</style>
